<template>
	 <div>
	 	<div action="" method="post" class="form">
	 	   	    	<div class="gologin">
	 	   	    		<a href="">直接登录</a>
	 	   	    	</div>

	 	   	    	 <div class="form-reg">
	 	   	    	 	<h3>注册账号</h3>
	 	   	    	 	<div class="reg">
	 	   	    	 		<input name="" v-model="mobile"   type="number" class="input phone" placeholder=" 请输入手机号">
	 	   	    	 		<div class="verify">
				               <input  v-model="isverification"  type="number" class="input possword" placeholder=" 短信验证码">
	 	   	    	 		   <a href="javascript:;" @click="getVerification">获取验证码</a>
				            </div>
	 	   	    	 		<input name="" v-model="posswords" type="" class="input yanzm" placeholder=" 密码">
	 	   	    	 	</div>
	 	   	    	 	<button @click="getRegistered">注册</button>
	 	   	    	 </div>
	 	   	    </div>

	 </div>
</template>

<script>
	 export default {
     data () {
      return {
      	mobile:"",
        isverification:"",
        posswords:''
      }
    },
    methods: {

      getVerification () {
      	if(this.mobile.length != 11){
      		this.open3()
      		return
      	}
        let params = {
          "mobile": this.mobile,
          "type":'reg'
        }
        this.$post('/user/sendMessage', params).then(res => {
          console.log(res)
        })
      },
       open3() {
        this.$message({
          message: '请输入正确的手机号/验证码',
          type: 'warning'
        });
      },
        getRegistered(){
        	let params = {
              "code": this.isverification,
              "mobile": this.mobile,
              "password": this.posswords
             }
        	this.$post('/user/register', params).then(res => {
          window.location.href = '/#/logins/'
        })
    }

  }
   }
</script>

<style scoped>
	 .form {
	width: 60%;
	height: 500px;
	background-color: #FFFFFF;
	margin: 0 auto;
	position: absolute;
	left: 20%;
}

.form .gologin {
	margin: 18px 60px 0 30px;
}

.gologin a {

	font-size: 14px;
	color: #007FE0;
}

.form .form-reg {
	width: 60%;
	height: 400px;
	margin: 42px auto 60px auto;
}

.form-reg h3 {
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 3px solid #42ADFF;
	font-size: 18px;
}
.form-reg button{
	display: block;
	width: 80%;
	height: 42px;
	line-height: 42px;
	text-align: center;
	background-color: #42ADFF;
    border: 0 solid #979797;
    border-radius: 4px;
    margin: 42px auto 0 auto;
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #FFFFFF;
}
.reg .possword{
	height: 60px;
	width: 80%;
	border: 0px;
	outline:none;
	margin: 0;
	display: inline-block;
}
 .reg a{

font-size: 12px;
color: #007FE0;
}
.input{
	display: block;
	margin:0 auto;
	height: 60px;
	width: 100%;
	border: 0px;
	outline:none;
	border-bottom: 1px solid #DADADA;

    font-size: 16px;
    color: #9B9B9B;
    padding-left: 10px;
}
.reg .verify{
	border-bottom: 1px solid #DADADA;
}
.reg .verify input{
	height: 60px;
	width: 80%;
	border: 0px;
	outline:none;
}
.imgcode{
	width: 20%;
}
</style>
